<template>
  <!-- 底部 -->
  <div class="footer">
    <div class="footerContainer">
      <!-- 第一列 -->
      <div class="footerList">
        <div class="footerItem">
          <h4>用户帮助</h4>
          <ul class="footerItemCon">
            <li>申请退款</li>
            <li>常见问题</li>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>反诈骗公告</li>
            <li>消费者权益保障</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>美团服务</h4>
          <ul class="footerItemCon">
            <li>美团外卖</li>
            <li>美团酒店</li>
            <li>猫眼电影</li>
            <li>美团配送</li>
            <li>反诈骗公告</li>
            <li>消费者权益保障</li>
          </ul>
        </div>
      </div>
      <!-- 第二列 -->
      <div class="footerList">
        <div class="footerItem">
          <h4>用户帮助</h4>
          <ul class="footerItemCon">
            <li>申请退款</li>
            <li>常见问题</li>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>反诈骗公告</li>
            <li>消费者权益保障</li>
            <li>申请退款</li>
            <li>常见问题</li>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>反诈骗公告</li>
            <li>消费者权益保障</li>
            <li>申请退款</li>
            <li>常见问题</li>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>反诈骗公告</li>
            <li>消费者权益保障</li>
          </ul>
        </div>
      </div>
      <!-- 第三列 -->
      <div class="footerList">
        <div class="footerItem">
          <h4>用户帮助</h4>
          <ul class="footerItemCon">
            <li>申请退款</li>
            <li>常见问题</li>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>反诈骗公告</li>
            <li>消费者权益保障</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>用户帮助</h4>
          <ul class="footerItemCon">
            <li>申请退款</li>
            <li>常见问题</li>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>反诈骗公告</li>
            <li>消费者权益保障</li>
          </ul>
        </div>
      </div>
      <!-- 第四列 -->
      <div class="footerList">
        <div class="footerItem">
          <h4>用户帮助</h4>
          <ul class="footerItemCon">
            <li>申请退款</li>
            <li>常见问题</li>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>反诈骗公告</li>
            <li>消费者权益保障</li>
            <li>申请退款</li>
            <li>常见问题</li>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>反诈骗公告</li>
            <li>消费者权益保障</li>
            <li>申请退款</li>
            <li>常见问题</li>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>反诈骗公告</li>
            <li>消费者权益保障</li>
          </ul>
        </div>
      </div>
      <!-- 第五列 -->
      <div class="footerList">
        <div class="footerItem">
          <h4>用户帮助</h4>
          <ul class="footerItemCon">
            <li>申请退款</li>
            <li>常见问题</li>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>反诈骗公告</li>
            <li>消费者权益保障</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>用户帮助</h4>
          <ul class="footerItemCon">
            <li>申请退款</li>
            <li>常见问题</li>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>反诈骗公告</li>
            <li>消费者权益保障</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="copyright">
      <div class="copyright-left">
        <p>
          ©美团网团购 meituan.com
          <a>京ICP证070791号</a>
          <a>京ICP备10211739号-1</a>
        </p>
        <p>
          <a>广播电视节目制作经营许可证（京）字第03889号</a>
        </p>
        <p>
          <a>互联网药品信息服务资格证 (京)-经营性-2017-0014</a>
        </p>
        <p>
          <a
            >医疗器械网络交易服务第三方平台备案:（京）网械平台备字[2018]第00004号</a
          >
        </p>
        <p><a>平台EDI许可证</a></p>
      </div>
      <div class="copyright-right">
        <a class="beian">
          <img src="./images/ia_400000006.png" alt="" />
          京公网安备 11000002002052号
        </a>
        <div class="copyright-right-cert">
          <a href="" class="bus-license" title="营业执照">
            <img src="./images/ia_400000007.png" alt="" />
            <p>北京三快科技有限公司</p>
          </a>
          <a class="beian-msg" title="备案信息"></a>
          <a class="beian-12315" title="12315消费争议"></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
.footer {
  width: 100%;
  margin-top: 80px;
  background-color: #f8f8f8;
  display: flow-root;
  margin-top: 50px;
}
.footerContainer {
  display: flex;
  width: 1190px;
  margin: 0 auto;
  border-top: 1px solid #ccc;
  padding: 40px 45px;
}
.footerList {
  width: 220px;
}
.footerItem {
  width: 220px;
  margin-bottom: 20px;
}
.footerItem h4 {
  height: 28px;
  margin: 0;
}
.footerItem .footerItemCon {
  list-style: none;
  outline: none;
  margin: 0;
  padding: 0;
  li {
    padding-bottom: 5px;
    &:hover {
      color: #fe8c00;
      cursor: pointer;
    }
  }
}
.copyright {
  width: 1190px;
  height: 140px;
  margin: 0 auto;
  padding-top: 15px;
  padding-left: 20px;
  padding-bottom: 30px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.copyright .copyright-left {
  width: 500px;
  height: 96px;
}
.copyright .copyright-left p {
  font-size: 12px;
  height: 20px;
  color: #999;
}
.copyright .copyright-left p > a {
  color: #999;
}
.copyright .copyright-left p > a:hover {
  color: #fe8c00;
}
.copyright .copyright-right {
  width: 388px;
  height: 96px;
}
.copyright .copyright-right .beian {
  width: 388px;
  height: 16px;
  display: flex;
  justify-content: right;
  color: #999;
}
.copyright-right .copyright-right-cert {
  width: 388px;
  height: 50px;
  padding-top: 6px;
  display: flex;
}
.copyright-right .copyright-right-cert .bus-license {
  width: 170px;
  height: 38px;
  display: flex;
}
.copyright-right .copyright-right-cert .bus-license img {
  width: 38px;
  height: 38px;
}
.copyright-right .copyright-right-cert .bus-license p {
  width: 130px;
  height: 38px;
  font-size: 12px;
  padding: 0 5px;
  line-height: 38px;
  color: #999;
}
.copyright-right .copyright-right-cert .beian-msg {
  width: 109px;
  height: 38px;
  margin-right: 2px;
  background-image: url(./images/ia_400000009.png);
  background-position: 0 -167px;
  background-repeat: no-repeat;
  overflow: hidden;
}
.copyright-right .copyright-right-cert .beian-12315 {
  width: 107px;
  height: 38px;
  background-image: url(./images/ia_400000009.png);
  background-position: 0 -41px;
  background-repeat: no-repeat;
  overflow: hidden;
}
</style>
